Taylor Stone Microsite Case Study
Introduction:
I built this website as a personal storefront from my own Etsy shop. This microsite gives background on who I am as an artist and small business as well as the products I sell. Creating a website in this fashion allowed me to design how my shop looks in a creative way that more accurately depicts my work than the generic Etsy layout.
Personas:
The personas that I made are very different from each other but I made sure both were oriented toward the fandom based product that I sell.
Site Map:
Upon making my site map I realized I needed to reign in my expectation for what I could realistically accomplish in the amount of time given. I think my personas helped me to decide what needed to go on my homepage in terms of information.
Wireframes:
When I made my wireframes I started thinking about the most effective layout for my final site which in the end I was able to mostly stick to. The screen that ended up getting altered the most was the catalog page as the imported listings weren't considered as "images" by glitch and therefore I ran into a lot of trouble working with resizing them and spacing them evenly.
Mockup/Prototype:
When I built my prototype I was focusing on the mobile layout more than the computer layout. I
wish I could've made my final outcome more similar to this mockup since I really enjoy how clean
it looks but since I focused more on computer layout in the final site, it seems like the way I did it is
the way it would translate regardless. This is the stage that I decided against sorting options since I
only have around 20 options to begin with and sorting option may begin to feel redundant. Elsewise, transfering from my sketched idea to this version was quite simple and I was very happy with the outcome.
Development:
In using a third-party source for creating my listings in the catalog page, I found out there was no way to add alt text to my images. I hope that adding the listing name underneath each photo will allow for the accessibility lost in that aspect to be made up. Leaming how to use media queries was very important to me in this project as I wanted the screen to be able to adapt better to different screen sizes.
Final Product:
https://taylor-stone-microsite.glitch.me/index.html
